<template>
  <van-dialog
    v-model="agreementVisible"
    title="服务协议"
    show-cancel-button
    confirmButtonText='同意协议开始使用'
    :confirmButtonColor='confirmButtonColor'
    :before-close="(action, done) => done(false)"
    @cancel='closeVisble'
    @confirm='agreementConfirm'>
    <div class="agreement-content">
      <h3>
        欢迎使用脚本精灵，使用之前请认真阅读以下协议，一旦使用本软件默认遵守以下协议。
      </h3>
      <p>
        1.使用本软件涉及到互联网服务，可能会受到各个环节
        不稳定因素的影响，存在因不可抗力、计算机病毒、黑
        客攻击、系统不稳定、非法内容信息、骚扰信息屏蔽以
        及其他任何网络、技术、通信线路、信息安全管理措施
        等原因造成的用户的经济损失，本人及合作单位不承担任何责任。
      </p>
      <p>
        2.使用本软件由用户自己承担风险，本人及合作单位对
        本软件不作任何类型的担保，不论是明示的、默示的或
        法令的保证和条件,包括但不限于本软件的适销性、适
        用性、无疏忽或无技术瑕疵问题、所有权和无侵权的明
        示或默示担保和条件,对在任何情况下因使用或不能
        使用本“软件”所产生的直接、间接、偶然、特殊及后续
        的损害及风险，本人及合作单位不承担任何责任。
      </p>
      <p>
        3.不得利用本软件及服务制作、复制、发布、传播侵犯
        其他用户或第三方合法权益的内容,包括但不限于:发
        布、传送、传播、储存违反国家法律法规禁止的内容。
      </p>
      
      <div class="agree">
        <van-checkbox square v-model="agreeAgreement" label-disabled>同意并遵守以上协议</van-checkbox>
      </div>
    </div>
  </van-dialog>
</template>

<script>
import Vue from "vue";
import { Dialog, Checkbox } from "vant";
Vue.use(Dialog);
Vue.use(Checkbox);

export default {
  name: "AgreementDialog",
  props: {},
  data() {
    return {};
  },
  computed: {
    agreementVisible: {
      get() {
        return this.$store.state.agreementVisible;
      },
      set() {
        this.$store.commit("SET_TOTLE_DATA", { agreementVisible: false });
      },
    },
    agreeAgreement: {
      get() {
        return this.$store.state.agreeAgreement;
      },
      set() {
        this.$store.commit("SET_TOTLE_DATA", { agreeAgreement: !this.agreeAgreement });
      },
    },
    confirmButtonColor() {
      return this.agreeAgreement ? 'red' : '#999';
    }
  },
  methods: {
    closeVisble() {
      this.$store.commit("SET_TOTLE_DATA", { agreementVisible: false });
    },
    agreementConfirm() {
      if (!this.agreeAgreement) {
        this.$store.commit("SET_TOTLE_DATA", { agreeAgreement: true });
      }
      this.$store.commit("SET_TOTLE_DATA", { agreementVisible: false });
    }
  },
};
</script>
<style lang="scss" scoped>
.agreement-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  h3 {
    font-size: 16px;
    margin: 0px 0px 6px 0px;
  }
  p {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin-bottom: 10px;
  }
  .agree {
    font-weight: bold;
    margin: 20px 0px;
    /deep/ .van-checkbox__label {
      font-size: 16px;
      font-weight: normal;
      color: red;
    }
  }
}
</style>
